<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高级例子</title>
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="static/bootstrap/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<!-- jquery1.9好使，2.X不好使，而且不能引入两个jquery文件 -->
<script src="static/jquery/jquery-1.9.1.js"></script>
<!-- canvas-to-blob.min.js is only needed if you wish to resize images before upload.
     This must be loaded before fileinput.min.js -->
<!--用于上传图片之前调整大小  -->
<script src="static/bootstrap/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<!-- sortable.min.js is only needed if you wish to sort / rearrange files in initial preview.
     This must be loaded before fileinput.min.js -->
<!--预览时，排序功能  ||位于fileinput.min.js前-->
<script src="static/bootstrap/js/plugins/sortable.min.js" type="text/javascript"></script>
<!-- purify.min.js is only needed if you wish to purify HTML content in your preview for HTML files.
     This must be loaded before fileinput.min.js -->
<!--HTML文件中预览功能 || 位于fileinput.min.js前-->
<script src="static/bootstrap/js/plugins/purify.min.js" type="text/javascript"></script>
<!-- the main fileinput plugin file -->
<!--文件上传主插件  -->
<script src="static/bootstrap/js/fileinput.min.js"></script>
<!-- bootstrap.js below is needed if you wish to zoom and view file content 
     in a larger detailed modal dialog -->
<!--调焦和查看文件内容细节功能  -->
<script src="static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- optionally if you need a theme like font awesome theme you can include 
    it as mentioned below -->
<!--主题功能  -->
<script src="static/bootstrap/themes/fa/theme.js"></script>
<!-- optionally if you need translation for your language then include 
    locale file as mentioned below -->
<!--多国语言功能  -->
<script src="static/bootstrap/js/locales/zh.js"></script>
<style>
hr{
    margin-top:7px;
    *margin: 0;
    border: 0;
    color: black;
    background-color: black; 
    height: 3px
}
</style>
</head>
<body>
<h3>已下案例来源于网址<a href="http://plugins.krajee.com/file-advanced-usage-demo">http://plugins.krajee.com/file-advanced-usage-demo</a></h3>
<hr/>
<label class="control-label">advanced example1 </label>
<p>说明：设置最大上传为1000kb，加载及预览文件和图片，overwriteInitial设置为false，新添加的文件重新写入，初始的预览也会显示</p>
<input id="input-24" name="input24[]" type="file" multiple class="file-loading"><!--multiple这个属性是允许多个文件上传  -->
<script>
$(document).on('ready', function() {
    $("#input-24").fileinput({
        initialPreview: [
            'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg',
            'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg'
        ],
        initialPreviewAsData: true,
        initialPreviewConfig: [
            {caption: "Moon.jpg", size: 930321, width: "120px", key: 1},
            {caption: "Earth.jpg", size: 1218822, width: "120px", key: 2}
        ],
        deleteUrl: "/site/file-delete",
        overwriteInitial: false,
        maxFileSize: 1000,
        initialCaption: "The Moon and the Earth"
    });
});
</script>
<hr/>
<label class="control-label">advanced example2 </label>
<p>overwriteInitial设置为true，新添加的文件重新写入，初始的预览会被覆盖</p>
<label class="control-label">Planets and Satellites</label>
<input id="input-25" name="input25[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-25").fileinput({
       initialPreview: [
            'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg',
            'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Earth_Eastern_Hemisphere.jpg/600px-Earth_Eastern_Hemisphere.jpg'
        ],
        initialPreviewAsData: true,
        initialPreviewConfig: [
            {caption: "Moon.jpg", size: 930321, width: "120px", key: 1, showDelete: false},
            {caption: "Earth.jpg", size: 1218822, width: "120px", key: 2, showZoom: false}
        ],
        deleteUrl: "/site/file-delete",
        overwriteInitial: true,
        initialCaption: "The Moon and the Earth"
    });
});
</script>
<hr/>
<label class="control-label">advanced example3 </label>
<p>说明：将上传框设置为一个块状按钮（将其他按钮移除）</p>
<input id="input-20" type="file" class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-20").fileinput({
        browseClass: "btn btn-primary btn-block",
        showCaption: false,
        showRemove: false,
        showUpload: false
    });
});
</script>
<hr/>
<label class="control-label">advanced example4 </label>
<p>说明：弹出框中只显示图片，设置browse，upload，remove样式</p>
<input id="input-21" type="file" accept="image/*" class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-21").fileinput({
        previewFileType: "image",
        browseClass: "btn btn-success",
        browseLabel: "Pick Image",
        browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
        removeClass: "btn btn-danger",
        removeLabel: "Delete",
        removeIcon: "<i class=\"glyphicon glyphicon-trash\"></i> ",
        uploadClass: "btn btn-info",
        uploadLabel: "Upload",
        uploadIcon: "<i class=\"glyphicon glyphicon-upload\"></i> "
    });
});
</script>
<hr/>
<label class="control-label">advanced example5 </label>
<p>说明：预览控制。只允许text文件上传与预览。</p>
<input id="input-22" name="input22[]" type="file" class="file-loading" accept="text/plain" multiple>
<script>
$(document).on('ready', function() {
    $("#input-22").fileinput({
        previewFileType: "text",
        allowedFileExtensions: ["txt", "md", "ini", "text"],
        previewClass: "bg-warning"
    });
});
</script>
<hr/>
<label class="control-label">advanced example6 </label>
<p>说明：个性化使用模板，将右侧的按钮移至左侧</p>
<input id="input-23" name="input23[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-23").fileinput({
        showUpload: false,
        layoutTemplates: {
            main1: "{preview}\n" +
            "<div class=\'input-group {class}\'>\n" +
            "   <div class=\'input-group-btn\'>\n" +
            "       {browse}\n" +
            "       {upload}\n" +
            "       {remove}\n" +
            "   </div>\n" +
            "   {caption}\n" +
            "</div>"
        }
    });
});
</script>
<hr/>
<label class="control-label">advanced example7 </label>
<p>说明：使用插件的方式，在运行时改变input状态。eg：点击modify按钮，控制插件的有效性。</p>
<input id="input-40" name="input40[]" type="file" class="file" multiple>
<br>
<button type="button" class="btn btn-warning btn-modify">Modify</button>
<script>
$(document).on('ready', function() {
    $(".btn-modify").on("click", function() {
        var $btn = $(this), $input = $("#input-40");
        if ($btn.text() == "Modify") {
            $("#input-40").fileinput("disable").fileinput("refresh", {showUpload: false});
            $btn.html("Revert");
            alert("Hurray! I have disabled the input and hidden the upload button.");
        }
        else {
            $("#input-40").fileinput("enable").fileinput("refresh", {showUpload: true});
            $btn.html("Modify");
            alert("Hurray! I have reverted back the input to enabled with the upload button.");
        }
    });
});
</script>
<hr/>
<label class="control-label">advanced example8 </label>
<p>说明：只允许图片和视频文件的上传，通过使用fileTypesSettings,配置有效的文件类型。</p>
<input id="input-41" name="input41[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-41").fileinput({
        maxFileCount: 10,
        allowedFileTypes: ["image", "video"]
    });
});
</script>
<hr/>
<label class="control-label">advanced example9 </label>
<p>说明：只允许特定的文件类型。</p>
<input id="input-42" name="input42[]" type="file" multiple class="file-loading">
<script>
$(document).on('ready', function() {
    $("#input-42").fileinput({
        maxFileCount: 10,
        allowedFileExtensions: ["jpg", "gif", "png", "txt"]
    });
});
</script>
<hr/>
<label class="control-label">advanced example10</label>
<p>说明：禁止预览，个性化自己的错误信息和容器。</p>
<input id="input-43" name="input43[]" type="file" multiple class="file-loading">
<div id="errorBlock" class="help-block">我自己定义的错误的是模块</div>
<script>
$(document).on('ready', function() {
    $("#input-43").fileinput({
        showPreview: false,
        allowedFileExtensions: ["zip", "rar", "gz", "tgz"],
        elErrorContainer: "#errorBlock"
    });
});
</script>
<hr/>
<label class="control-label">advanced example11</label>
<p>说明：通过配置maxFilePreviewSize 控制预览文件的文件大小。本例将预览文件的最大值设置为10MB，默认值为25MB</p>
<input id="input-44" name="input44[]" type="file" multiple class="file-loading">
<div id="errorBlock" class="help-block"></div>
<script>
$(document).on('ready', function() {
    $("#input-44").fileinput({
    	language: "zh",//用于设置语言
        uploadUrl: '/file-upload-batch/2',
        maxFilePreviewSize: 10240
    });
});
</script>
</body>
</html>